<template>
	<view class="page">
		<view class="card">
			<view class="card-title">我的余额</view>
			<view class="card-num">{{ myBalance.totalAmount || 0 }}元</view>
			<view class="card-flex mt-30">
				<view class="card-text">
					<!-- <view>可提现</view> -->
					<view>待结算收益</view>
					<view class="mt-8">{{ myBalance.availableForWithdrawal || 0 }}元</view>
				</view>
				<view class="card-flex">
					<view class="btn" @click="handleWithdraw">提现</view>
					<view class="btn1" @click="handleRecharge">充值</view>
				</view>
			</view>
		</view>
		<view class="records">
			<view class="records-title">数据记录</view>
			<view class="records-flex">
				<view class="records-flex1">
					<view class="text">{{ myBalance.topUp }}</view>
					<view class="text1">累计充值</view>
				</view>
				<view class="records-flex1">
					<view class="text">{{ myBalance.expense }}</view>
					<view class="text1">累计消费</view>
				</view>
				<view class="records-flex1">
					<view class="text">{{ myBalance.withdrawn }}</view>
					<view class="text1">累计提现</view>
				</view>
			</view>
		</view>

		<view class="segmented">
			<SegmentedControl class="control" :current="current" :style="{ height: '88rpx' }" :values="items"
				:style-type="styleType" :active-color="activeColor" @clickItem="onClickItem" />
		</view>

		<view class="list" v-if="listData.length > 0">
			<view class="list-flex" v-for="(item, index) in listData" :key="index">
				<view>
					<view class="list-title">{{ item.businessType }} <span
							style="color: #0000d6;margin-left: 10rpx;">{{item.orderStatusName}}</span>
					</view>
					<view class="list-title">
						ID:{{item.userId}}
					</view>
					<view class="list-title">
						商品:{{item.goodName}}
					</view>

				</view>

				<view>
					<view class="list-pirce">{{ current == 0 ? "+" : "-" }}{{ item.variation
					}}{{ item.variationType == 2 ? "积分" : "元" }}</view>
					<view class="list-time">{{ item.createTime.slice(0, 16) }}</view>
				</view>
			</view>
		</view>

		<Empty v-else />

		<uni-popup ref="popup" background-color="rgba(0,0,0,0)" :safeArea="false" :mask-click="false" type="bottom">
			<view class="popup-content">
				<view class="popup-title">充值金额</view>
				<view class="content-flex">
					<u--input placeholder="请输入充值金额" border="surround" type="digit" v-model="amount"
						@change="amountChange"></u--input>
					<!-- <view
            class="popup-item"
            :class="currentIndex == index ? 'popup-border' : ''"
            v-for="(item, index) in payAmountList"
            :key="index"
            @click="clickPayPrice(item, index)"
          >
            <view class="flex">
              <view class="text2">￥</view>
              <view class="text">{{ item.price }}</view>
            </view>
            <view class="text1">赠{{ item.integral }}积分</view>
          </view> -->
				</view>
				<view class="popup-btn">
					<view class="btn-flex">
						<view class="popup-text">待支付</view>
						<view class="popup-text1" v-if="rechargeAmount > 0">{{ rechargeAmount }}元</view>
					</view>
					<view class="payment" @click="recharge">立即支付</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import mineApi from "@/api/mine";
	import payApi from "@/api/pay";

	import SegmentedControl from "@/components/segmented-control/index.vue";
	export default {
		name: "setup",
		components: {
			SegmentedControl,
		},
		data() {
			return {
				rateValue: 5,
				value: "",
				items: ["收入", "支出"],
				current: 0,
				activeColor: "#000",
				styleType: "text",
				myBalance: {},
				listData: [],
				currentIndex: 0, // 当前选择的充值金额
				payAmountList: [
					// 充值金额数组
					{
						price: 0.01,
						integral: 10,
					},
					{
						price: 0.02,
						integral: 20,
					},
				],
				amount: "", // 输入框金额
				rechargeAmount: 0.0, // 充值金额
				rechargeOrderId: null, // 充值订单id
			};
		},
		onLoad(options) {},
		onShow() {
			this.getMyBalance();
			this.getIncomeList();
			// 查询订单支付状态-第三方平台
			// this.getOrderPayStatus(this.rechargeOrderId);
		},
		methods: {
			getOrderPayStatus(id) {
				let params = {
					id,
				};
				payApi.getOrderPayStatus(params).then((res) => {
					let msg = JSON.parse(res.msg);
					if (msg.code == 0) {
						let data = JSON.parse(msg.data);
						if (data.status == 1) {
							uni.showLoading({
								title: "查询支付结果中···",
								mask: true,
							});
							payApi
								.balanceRecharge({
									balanceOrderId: id,
									integral: 0
								})
								.then((result) => {
									if (result.code == 200) {
										uni.hideLoading();
										this.$refs.popup.close();
										uni.showToast({
											title: "支付成功",
											icon: "none",
											mask: true,
										});
										this.amount = ""; // 输入框金额
										this.rechargeAmount = 0; // 充值金额
										this.getMyBalance();
										this.getIncomeList();
									}
								});
						}
					}
				});
			},
			// 我的余额
			getMyBalance() {
				mineApi.getMyBalance().then((res) => {
					if (res.code == 200) {
						this.myBalance = res.data;
					}
				});
			},
			// 收入
			getIncomeList() {
				mineApi.expenditurePage({
					pageNum: 1,
					pageSize: 9999,
					addOrSubtract: 1
				}).then((res) => {
					if (res.code == 200) {
						this.listData = res.rows;
					}
				});
			},
			// 支出
			getExpensesList() {
				mineApi.expenditurePage({
					pageNum: 1,
					pageSize: 9999,
					addOrSubtract: 2
				}).then((res) => {
					if (res.code == 200) {
						this.listData = res.rows;
					}
				});
			},
			onClickItem(e) {
				this.current = e.currentIndex;
				if (this.current == 0) {
					this.getIncomeList();
				}
				if (this.current == 1) {
					this.getExpensesList();
				}
			},
			// 充值
			handleRecharge() {
				// uni.showToast({
				// 	title: '请联系管理员充值!',
				// 	icon: "error"
				// })


				this.$refs.popup.open();
			},
			// 切换充值金额
			clickPayPrice(item, index) {
				if (this.currentIndex == index) return;
				this.currentIndex = index;
				this.rechargeAmount = item.price;
			},
			amountChange(val) {
				this.rechargeAmount = uni.$u.trim(val, "all");
			},
			// 充值
			recharge() {
				let amount = this.rechargeAmount;
				payApi
					.createRechargeOrder({
						money: amount,
						rechareType: '微信'
					})
					.then((result) => {
						if ((result.code = 200)) {
							this.rechargeOrderId = result.msg;
							let params = {
								payMoney: amount,
								terminalCode: "10802101",
								outTradeNo: result.msg,
							};
							let _this = this
							payApi.getChargeMD5Sign(params).then((res) => {
								if (res.code == 200) {
									wx.requestPayment({
										...JSON.parse(res.data.resulutMsg),
										// provider: 'wxpay',  // 支付提供商
										// timeStamp: res.data.timeStamp+'',  // 时间戳
										// nonceStr: res.data.nonceStr,    // 随机字符串
										// package: res.data.package,      // 统一下单接口返回的prepay_id参数值
										// signType: res.data.signType,                      // 签名算法
										// paySign: res.data.paySign,      // 签名
										success: (res) => {


											payApi
												.balanceRecharge({
													balanceOrderId: _this.rechargeOrderId,
													integral: 0
												})
												.then((result) => {
													if (result.code == 200) {
														uni.hideLoading();
														_this.$refs.popup.close();
														_this.getMyBalance();
														uni.showToast({
															title: "支付成功",
															icon: "none",
															mask: true,
														});

													}
												});

											// uni.redirectTo({
											//   url: "/pages/userCenter",
											// });
											// let msg = JSON.parse(res.msg);
											// let path = `/pages/pay/index?amount=${amount}&outTradeNo=${result.msg}&nonceStr=${msg.nonceStr}&terminalCode=10802101&sign=${msg.sign}`;
											// uni.openEmbeddedMiniProgram({
											//   appId: "wxe2a79b618a66592d",
											//   envVersion: "release", // develop（开发版），trial（体验版），release（正式版）
											//   path,
											// });
										},
										fail: (err) => {
											console.log(err, 'err');
											// 支付失败回调
											// this.paymentResult = {
											//     success: false,
											//     message: '支付失败，请重试'
											// };
											// this.showPaymentResult = true;
										}
									});
								}


							});


							// payApi.getMD5Sign(params).then((res) => {
							//   if (res.code == 200) {
							//     let msg = JSON.parse(res.msg);
							//     let path = `/pages/pay/index?amount=${amount}&outTradeNo=${result.msg}&nonceStr=${msg.nonceStr}&terminalCode=10802101&sign=${msg.sign}`;
							//     uni.openEmbeddedMiniProgram({
							//       appId: "wxe2a79b618a66592d",
							//       envVersion: "release", // develop（开发版），trial（体验版），release（正式版）
							//       path,
							//     });
							//   }
							// });
						}
					});
			},
			// 提现
			handleWithdraw() {
				let sum = 0

				sum = this.myBalance.totalAmount

				uni.navigateTo({
					url: `/subPages/promotion/withdrawal?balance=${
          sum  || "0.00"
        }`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		background: #fff;
		width: 100vw;
		height: 100vh;
		padding-top: 20rpx;
		overflow-y: auto;
		// text-align: center;
	}

	.segmented {
		width: 100%;
		box-shadow: 0 4rpx 6rpx 0 #00000026;
		margin-top: 20rpx;
	}

	.segmented>.uni-segmented-control {
		height: 88rpx !important;
	}

	/* 假设你的组件类名为 .uni-segmented-control */
	.segmented .uni-segmented-control .uni-sc-item {
		color: grey !important;
		/* 未激活的颜色 */
	}

	.list {
		margin-top: 10rpx;
	}

	.list-flex {
		margin: 30rpx 30rpx 0rpx 30rpx;
		padding-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #efefef;

		.list-title {
			color: #000000;
			font-family: "PingFang SC";
			font-size: 26rpx;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
			opacity: 0.9;
		}

		.list-time {
			color: #000000;
			font-family: "PingFang SC";
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			opacity: 0.5;
			margin-top: 8rpx;
		}

		.list-pirce {
			color: #000000;
			text-align: right;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
			opacity: 0.9;
		}
	}

	.card {
		margin: 30rpx 30rpx 0 30rpx;
		width: 690rpx;
		height: 308rpx;
		border-radius: 12rpx;
		background: linear-gradient(298deg, #1e1f26 0%, #1e1f268c 100%);
		padding: 37rpx 0 0 40rpx;

		.card-title {
			color: #ffffff;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
			line-height: normal;
		}

		.card-num {
			color: #ffffff;
			font-family: "PingFang SC";
			font-size: 64rpx;
			font-style: normal;
			font-weight: 600;
			line-height: normal;
			margin-top: 10rpx;
		}

		.card-flex {
			display: flex;
			justify-content: space-between;
		}

		.card-text {
			color: #ffffff;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx;
		}

		.mt-8 {
			margin-top: 8rpx;
		}

		.mt-30 {
			margin-top: 30rpx;
		}

		.mr-20 {
			margin-right: 20rpx;
		}

		.btn {
			width: 164rpx;
			height: 80rpx;
			flex-shrink: 0;
			border-radius: 16rpx;
			border: 2rpx solid #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			font-family: "PingFang SC";
			font-size: 30rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			margin-right: 40rpx;
		}

		.btn1 {
			width: 164rpx;
			height: 80rpx;
			flex-shrink: 0;
			border-radius: 16rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #000000;
			font-family: "PingFang SC";
			font-size: 30rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			margin-right: 20rpx;
		}
	}

	.records {
		width: 690rpx;
		height: 172rpx;
		flex-shrink: 0;
		border-radius: 24rpx;
		background: var(--f-8-f-8-f-8, #f8f8f8);
		padding: 20rpx 24rpx;
		margin: 20rpx 30rpx;

		.records-title {
			color: #000000;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx;
		}

		.records-flex {
			display: flex;
			justify-content: space-around;
			margin-top: 20rpx;
		}

		.records-flex1 {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
		}

		.text {
			color: #000000;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 32rpx;
		}

		.text1 {
			color: #000000;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 24rpx;
			opacity: 0.5;
			margin-top: 14rpx;
		}
	}

	.popup-content {
		width: 750rpx;
		// height: 743rpx;
		flex-shrink: 0;
		border-radius: 36rpx 36rpx 0 0;
		padding: 30rpx 28rpx;
		background: #fff;

		.popup-title {
			color: #000000;
			font-family: "PingFang SC";
			font-size: 34rpx;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
			opacity: 0.9;
			margin-bottom: 30rpx;
		}

		.popup-item {
			width: 218rpx;
			height: 151rpx;
			flex-shrink: 0;
			border-radius: 24rpx;
			border: 3rpx solid #ebebeb;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
		}

		.popup-border {
			border-color: #ff4254;
		}

		.text {
			color: #ff4254;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 52rpx;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}

		.text1 {
			color: #000000;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			opacity: 0.5;
		}

		.text2 {
			color: #ff4254;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 26rpx;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}

		.flex {
			display: flex;
			align-items: center;
		}

		.content-flex {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			flex-direction: row;
		}

		.popup-item:nth-child(3n) {
			margin-right: 0;
		}

		.popup-btn {
			// width: 750rpx;
			height: 160rpx;
			flex-shrink: 0;
			background: #fff;
			margin-top: 153rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn-flex {
			display: flex;
			align-items: center;
			width: 460rpx;
		}

		.popup-text {
			width: 78rpx;
			color: #000000;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 46rpx;
		}

		.popup-text1 {
			color: #000000;
			font-family: "PingFang SC";
			font-size: 36rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 46rpx;
			opacity: 0.9;
			margin-left: 12rpx;
		}

		.payment {
			display: flex;
			width: 294rpx;
			height: 100rpx;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			border-radius: 50rpx;
			background: #121212;
			// margin-right: 28rpx;
			color: #ffffff;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
	}

	.withdraw {
		width: 640rpx;
		border-radius: 8rpx;
		background: #fff;

		.withdraw-content {
			padding: 64rpx;
		}

		.withdraw-title {
			color: #000000e6;
			text-align: center;
			font-family: "Noto Sans SC";
			font-size: 34rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 42rpx;
		}

		.withdraw-input {
			height: 64rpx;
			border-radius: 8rpx;
			background: #f3f3f3 !important;
			margin-top: 64rpx;
			display: flex;
			align-items: center;
			padding: 0 0 0 20rpx;
		}

		.btn-flex {
			display: flex;
			align-items: center;
			border-top: 1rpx solid #f9f9f9;
		}

		.line {
			width: 2rpx;
			height: 64rpx;
			background: #f6f6f6;
		}

		.btn {
			width: 319rpx;
			height: 112rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			color: #000000e6;
			text-align: center;
			font-family: "Noto Sans SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
		}

		.btn1 {
			width: 319rpx;
			height: 112rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			color: #ff4254;
			text-align: center;
			font-family: "Noto Sans SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx;
		}
	}
</style>